<template>
    <div class="main-box">
        <div class="video-box">
            <!-- <video id="video" ref="videoPlayer" :src="videoUrl" @timeupdate="handleVideoTimeUpdate" controls></video> -->
            <img id="imgEl" src="@/assets/img/tour/images-head/411_202312141049_cut_01.jpg" alt="" srcset="">
        </div>
        <div class="chart-box">
            <div ref="chartContainer" style="width: 100%; height: 180px;"></div>
            <div class="data-box">
                <div class="item" v-for="item in list">
                    <div class="mt-4">{{ item.value }}</div>
                    <div class="mt-2" style="color: #494d6f;">{{ item.label }}</div>
                </div>
            </div>

        </div>

    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import * as echarts from 'echarts';
import moment from "moment";
const router = useRouter()
const route = useRoute()
const chartContainer = ref(null);
let chartInstance;
const imgEl = ref()
const imgArr = ref([
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_01.jpg`, import.meta.url).href,
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_02.jpg`, import.meta.url).href,
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_03.jpg`, import.meta.url).href,
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_04.jpg`, import.meta.url).href,
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_05.jpg`, import.meta.url).href,
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_06.jpg`, import.meta.url).href,
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_07.jpg`, import.meta.url).href,
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_08.jpg`, import.meta.url).href,
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_09.jpg`, import.meta.url).href,
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_10.jpg`, import.meta.url).href,
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_11.jpg`, import.meta.url).href,
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_12.jpg`, import.meta.url).href,
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_13.jpg`, import.meta.url).href,
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_14.jpg`, import.meta.url).href,
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_15.jpg`, import.meta.url).href,
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_16.jpg`, import.meta.url).href,
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_17.jpg`, import.meta.url).href,
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_18.jpg`, import.meta.url).href,
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_19.jpg`, import.meta.url).href,
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_20.jpg`, import.meta.url).href,
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_21.jpg`, import.meta.url).href,
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_22.jpg`, import.meta.url).href,
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_23.jpg`, import.meta.url).href,
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_24.jpg`, import.meta.url).href,
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_25.jpg`, import.meta.url).href,
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_26.jpg`, import.meta.url).href,
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_27.jpg`, import.meta.url).href,
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_28.jpg`, import.meta.url).href,
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_29.jpg`, import.meta.url).href,
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_30.jpg`, import.meta.url).href,
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_31.jpg`, import.meta.url).href,
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_32.jpg`, import.meta.url).href,
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_33.jpg`, import.meta.url).href,
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_34.jpg`, import.meta.url).href,
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_35.jpg`, import.meta.url).href,
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_36.jpg`, import.meta.url).href,
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_37.jpg`, import.meta.url).href,
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_38.jpg`, import.meta.url).href,
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_39.jpg`, import.meta.url).href,
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_40.jpg`, import.meta.url).href,
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_41.jpg`, import.meta.url).href,
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_42.jpg`, import.meta.url).href,
    new URL(`@/assets/img/tour/images-head/411_202312141049_cut_36.jpg`, import.meta.url).href,

])
const list = ref([
    {
        label: '出勤/应到人数',
        value: '28/30'
    },
    {
        label: '到课率',
        value: '90%'
    },
    {
        label: '前排就座指数',
        value: '0.5'
    },
    {
        label: '注意力指数',
        value: '0.88'
    },
    {
        label: '活跃指数',
        value: '1.2'
    },
    {
        label: '到课准时率',
        value: '100%'
    },
    {
        label: '抬头率峰值',
        value: '80%'
    },


])
const chartOption = {
    tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(0, 0, 0, .7)',
        borderWidth: 0,
        axisPointer: {
            type: 'none',
            crossStyle: {
                color: '#999'
            }
        }
    },
    legend: {

        data: [{
            name: '抬头率',
            icon: 'circle',
            textStyle: {
                color: '#c5b100'
            },
        }, {
            name: '看手机',
            icon: 'circle',
            textStyle: {
                color: '#4bb80d'
            },
        }, {
            name: '趴桌子',
            icon: 'circle',
            textStyle: {
                color: '#be6710'
            },
        }],
        itemGap: 25,
        right: 188,
        top: 20,

    },
    xAxis: [
        {
            tooltip: {
                show: false,
            },
            type: 'category',
            data: ['00:30', '01:30', '02:30', '03:30', '04:30', '05:30', '06:30', '07:30', '08:30', '09:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30', '16:30', '17:30', '18:30', '19:30', '20:30', '21:30', '22:30', '23:30', '24:30', '25:30', '26:30', '27:30', '28:30', '29:30', '30:30', '31:30', '32:30', '33:30', '34:30', '35:30', '36:30', '37:30', '38:30', '39:30', '40:30', '41:30', '42:00'],
            axisPointer: {
                type: 'none'
            },
            axisLine: {
                show: false//不显示y轴的线
            },
            splitArea: { "show": true, areaStyle: { "color": ["rgba(8, 13, 60,.8)"] } }
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '',
            min: 0,
            max: 100,
            interval: 50,
            axisLine: {
                show: false//不显示y轴的线
            },
            axisLabel: {
                formatter: '{value} %'
            },
            splitLine: {                                //网格线
                show: false,
            }
        },
        {
            type: 'value',
            name: '',
            min: 0,
            max: 100,
            interval: 0,
            axisLine: {
                show: false//不显示y轴的线
            },
        }
    ],
    series: [
        {
            name: '',
            type: 'bar',
            yAxisIndex: 0,
            barWidth: '60%',
            tooltip: {
                show: false,
            },
            data: [
                { value: 12.0, itemStyle: { color: '#191e4a' } }, { value: 18.0, itemStyle: { color: '#191e4a' } }, { value: 29.0, itemStyle: { color: '#191e4a' } }, { value: 38.0, itemStyle: { color: '#191e4a' } }, { value: 49.0, itemStyle: { color: '#191e4a' } }, { value: 76.0, itemStyle: { color: '#191e4a' } }, { value: 86.0, itemStyle: { color: '#191e4a' } }, { value: 12.0, itemStyle: { color: '#191e4a' } }, { value: 18.0, itemStyle: { color: '#191e4a' } }, { value: 29.0, itemStyle: { color: '#191e4a' } }, { value: 38.0, itemStyle: { color: '#191e4a' } }, { value: 49.0, itemStyle: { color: '#191e4a' } }, { value: 76.0, itemStyle: { color: '#191e4a' } }, { value: 86.0, itemStyle: { color: '#191e4a' } }, { value: 12.0, itemStyle: { color: '#191e4a' } }, { value: 18.0, itemStyle: { color: '#191e4a' } }, { value: 29.0, itemStyle: { color: '#191e4a' } }, { value: 38.0, itemStyle: { color: '#191e4a' } }, { value: 49.0, itemStyle: { color: '#191e4a' } }, { value: 76.0, itemStyle: { color: '#191e4a' } }, { value: 86.0, itemStyle: { color: '#191e4a' } }, { value: 92.0, itemStyle: { color: '#191e4a' } }, { value: 12.0, itemStyle: { color: '#191e4a' } }, { value: 18.0, itemStyle: { color: '#191e4a' } }, { value: 29.0, itemStyle: { color: '#191e4a' } }, { value: 38.0, itemStyle: { color: '#191e4a' } }, { value: 49.0, itemStyle: { color: '#191e4a' } }, { value: 76.0, itemStyle: { color: '#191e4a' } }, { value: 86.0, itemStyle: { color: '#191e4a' } }, { value: 12.0, itemStyle: { color: '#191e4a' } }, { value: 18.0, itemStyle: { color: '#191e4a' } }, { value: 29.0, itemStyle: { color: '#191e4a' } }, { value: 38.0, itemStyle: { color: '#191e4a' } }, { value: 49.0, itemStyle: { color: '#191e4a' } }, { value: 76.0, itemStyle: { color: '#191e4a' } }, { value: 86.0, itemStyle: { color: '#191e4a' } }, { value: 12.0, itemStyle: { color: '#191e4a' } }, { value: 18.0, itemStyle: { color: '#191e4a' } }, { value: 29.0, itemStyle: { color: '#191e4a' } }, { value: 38.0, itemStyle: { color: '#191e4a' } }, { value: 49.0, itemStyle: { color: '#191e4a' } }, { value: 76.0, itemStyle: { color: '#191e4a' } }, { value: 86.0, itemStyle: { color: '#191e4a' } }, { value: 92.0, itemStyle: { color: '#191e4a' } }
            ],

            itemStyle: {
                color: '#191e4a',
                borderRadius: 4,//圆角
            }
        },
        {
            name: '',
            type: 'bar',
            z: "-1",
            barGap: '-100%',
            barWidth: '60%',
            data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
            label: {
                show: false
            },
            tooltip: {
                show: false,
            },
            itemStyle: {
                color: "none",
                borderColor: "#fff",
                borderWidth: 1,
                borderRadius: 4,//圆角
            },
        },

        {
            name: '抬头率',
            type: 'line',
            yAxisIndex: 1,
            itemStyle: {
                color: '#c5b100',
            },
            tooltip: {
                trigger: 'axis',

                valueFormatter: function (value) {
                    return value + ' %';
                }
            },
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2, 2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2, 2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5]
        },
        {
            name: '看手机',
            type: 'line',
            yAxisIndex: 1,
            itemStyle: {
                color: '#4bb80d',
            },
            tooltip: {
                trigger: 'axis',
                valueFormatter: function (value) {
                    return value + ' %';
                }
            },
            data: [1.0, 4.2, 2.3, 3.5, 9.3, 7.2, 15.3, 28.4, 21.0, 9.5, 2.0, 4.2, 1.0, 4.2, 2.3, 3.5, 9.3, 7.2, 15.3, 28.4, 21.0, 28.4, 21.0, 1.0, 4.2, 2.3, 3.5, 9.3, 7.2, 15.3, 28.4, 21.0, 9.5, 2.0, 4.2, 1.0, 4.2, 2.3, 3.5, 9.3, 7.2, 15.3, 28.4, 21.0, 28.4, 21.0]
        },
        {
            name: '趴桌子',
            type: 'line',
            yAxisIndex: 1,
            itemStyle: {
                color: '#be6710',
            },
            tooltip: {
                trigger: 'axis',
                valueFormatter: function (value) {
                    return value + ' %';
                }
            },
            data: [3.0, 4.2, 5.3, 6.5, 7.3, 9.2, 8.3, 12.4, 18.0, 19.5, 6.0, 9.2, 3.0, 4.2, 5.3, 6.5, 7.3, 9.2, 8.3, 12.4, 18.0, 19.5, 6.0, 9.2, 3.0, 4.2, 5.3, 6.5, 7.3, 9.2, 8.3, 12.4, 18.0, 19.5, 6.0, 9.2, 3.0, 4.2, 5.3, 6.5, 7.3, 9.2, 8.3, 12.4, 18.0, 19.5, 6.0, 9.2]
        },
    ]
}
const updateChartData = (playedTime) => {
    // 更新柱状图的数据和颜色，将已经播放过的部分颜色设置为蓝色  
    // const newData = chartOption.series[1].data.map((item, index) => {
    //     if (val) {
    //         chartOption.series[0].itemStyle = { color: '#0295bf' }; // 蓝色  
    //     } else {
    //         chartOption.series[0].itemStyle = { color: '#191e4a' }; // 红色或其他颜色  
    //     }
    //     return item;
    // });
    // chartOption.series[1].data = newData;
    // chartInstance.setOption(chartOption);
    playedTime = moment.duration(playedTime).as('seconds') / 60;

    for (let i = 0; i < chartOption.xAxis[0].data.length; i++) {
        for (let j = 0; j < chartOption.series[0].data.length; j++) {
            if (playedTime >= moment.duration(chartOption.xAxis[0].data[i]).as('seconds') / 60) {
                chartOption.series[0].data[i].itemStyle = { color: '#0295bf' };
            } else {
                chartOption.series[0].data[i].itemStyle = { color: '#191e4a' };
            }

        }
    }
    // chartOption.series[0].data = newData;
    chartInstance.setOption(chartOption);
};
onMounted(() => {
    imgEl.value = document.querySelector('#imgEl')
    chartInstance = echarts.init(chartContainer.value);
    chartInstance.setOption(chartOption);
    chartInstance.getZr().off('click');
    chartInstance.getZr().on('click', (param) => {
        var pointInPixel = [param.offsetX, param.offsetY];
        if (chartInstance.containPixel('grid', pointInPixel)) {
            var xIndex = chartInstance.convertFromPixel({ seriesIndex: 0 }, [param.offsetX, param.offsetY])[0];
            var xData = chartOption.xAxis[0].data[xIndex];
            imgEl.value.src = imgArr.value[xIndex]
            updateChartData(xData)
        }

    })
});
</script>

<style lang="less" scoped>
.main-box {
    max-height: 614px;
    margin-top: 20px;
    overflow-y: auto;

    .video-box {
        // width: 100%;
        height: 477px !important;

        img {
            width: 100%;
            height: 100%;
            border-radius: 12px;
        }
    }

    .chart-box {
        width: 100%;
        height: 240px;
        margin-top: 10px;
        border-radius: 12px;
        background: #191D4A;
        position: relative;
    }

    .data-box {
        width: 58vw;
        /* width: 80.6%; */
        height: 83px;
        margin-top: -40px;
        margin-left: 125px;
        display: flex;
        justify-content: space-between;
        padding-left: 20px;

        .item {
            width: 150px;
            height: 84px;
            background: #070C3B;
            border-radius: 8px 8px 8px 8px;
            opacity: 1;
            text-align: center;
            vertical-align: middle;
            margin-right: 10px;
        }
    }
}
</style>